<style lang="less" scoped>
	.autoAdv {
		max-height: 110px;
	}
	.advBox {
		background: #F8F9FD;
		border-radius: 4px;
		padding: 20rpx 24rpx;
		display: flex;
		justify-items: center;
		vertical-align:middle;
		margin: 20rpx 30rpx;
		.laba {
			position: relative;
			top: 5rpx;
			flex: 1;
			.icon {
				width: 18px;
				height: 16px;
				margin-right: 18rpx;
			}
		}
		.advText {
			font-family: PingFangSC-Regular;
			font-size: 14px;
			color: #777777;
			letter-spacing: 0;
			display: inline-block;
			flex: 12;
		}
		.bot {
			flex: 1;
			text-align: right;
		}
	}
	.banner {
		width: 94%;
		margin: 0 3%;
		.h10s {
			width: 100%;
			border-radius: 5px;
			object-fit: cover;
		}
		.adtvBox {
			height: 100%;
			width: 100%;
			.shadow-warp {
				height: 100%;
				object-fit: cover;
			}
		}
	}
	.h10 {
		background: #F8F9FD;
		height: 10rpx;
	}
	.toUp {
		max-height: 55px;
	}
</style>
<template>
	<div class="content">
		<div class="model swiper animated fadeIn toUp" v-if="model === `up` && tabList.length > 0">
			<swiper :autoplay="true" :interval="interval" :vertical="true" :duration="duration" class="autoAdv">
				<repeat v-for="(x, index) in tabList" :key="index">
					<swiper-item class="li">
						<div class="advBox" @tap="goLink(x)">
							<div class="laba">
								<img src="http://img10.he29.com/static/mtu4nd/2811e357a3bf1062.png" class="icon">
							</div>
							<div class="advText show1">{{x.text}}</div>
							<div class="bot">
								<span class="cuIcon-right lg text-gray"></span>
							</div>
						</div>
					</swiper-item>
				</repeat>
			</swiper>
			<div class="h10" v-if="showbot"></div>
		</div>
		<div class="model banner animated fadeIn" v-if="model === `banner` && tabList.length > 0">
			<swiper :autoplay="true" :interval="interval" :duration="duration" :indicator-dots="dots" class="autoAdv">
				<repeat v-for="(x, index) in tabList" :key="index">
					<swiper-item class="li" @tap="goLink(x)">
						<div class="adtvBox" v-if="x.type === 1">
							<img src="http://img10.he29.com/static/mtu4nt/1c40d9a6b8fc784b.jpg" class="h10s shadow-warp">
						</div>
						<div class="adtvBox" v-if="x.type === 2">
							<ad :unit-id="x.url" />
						</div>
						<div class="adtvBox" v-if="x.type === 3">
							<ad :unit-id="x.url"
							    :ad-type="x.config.grid"
							    :grid-opacity="x.config.opacity"
							    :grid-count="x.config.count"
							    :ad-theme="x.config.theme"/>
						</div>
					</swiper-item>
				</repeat>
			</swiper>
			<div class="h10" v-if="showbot"></div>
		</div>
	</div>
</template>
<script type="text/javascript">
	/**
	 * Created by PhpStorm.
	 * User:  iyahe@qq.com (天明)
	 * Date: 2020/3/28
	 * Time: 18:49
	 * Description:
	 */
	export default {
		name: 'advtice',
		props: {
			tabList: {
				type: Array,
				default() {
					return []
				},
			},
			duration: {
				type: Number,
				default: 500,
			},
			interval: {
				type: Number,
				default: 3000,
			},
			model: {
				type: String,
				default: `up`,
			},
			dots: {
				type: Boolean,
				default: false,
			},
			showbot: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {}
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			goLink (x) {
				this.$wxapi.goNext(x.url)
			}
		},
	}
</script>
